<template>
  <view class="finance-page">
    <z-paging
      ref="paging"
      v-model="productList"
      :refresher-default-text="useT('继续下拉刷新')"
      :refresher-pulling-text="useT('松开立即刷新')"
      :refresher-refreshing-text="useT('正在刷新.')"
      :empty-view-text="useT('暂无数据')"
      :loading-more-loading-text="useT('加载中.')"
      :loading-more-no-more-text="useT('没有更多了')"
      :refresher-complete-text="useT('刷新完成')"
      :loading-more-default-text="useT('点击加载更多')"
      :loading-more-fail-text="useT('加载失败，点击重新加载')"
      @query="queryList"
    >
      <template #top>
        <!-- 头部 -->
        <up-navbar :title="useT('理财')" :autoBack="true" :safeAreaInsetTop="true" :fixed="true" :placeholder="true" bgColor="#fff" titleColor="#333"></up-navbar>

        <!-- 投资理财季轮播图 -->
        <view class="banner-swiper">
          <up-swiper :list="bannerList" keyName="image" height="360rpx" :autoplay="true" :interval="4000" :circular="true" :indicator="true" indicatorMode="dot" :indicatorActiveColor="'#12C284'" :indicatorInactiveColor="'rgba(255, 255, 255, 0.5)'" @click="onBannerClick"></up-swiper>
        </view>

        <!-- 导航标签 -->
        <view class="nav-tabs">
          <view class="tab-item" :class="{ active: activeTab === 'market' }" @click="switchTab('market')">{{ useT('理财市场') }}</view>
          <view class="tab-item" :class="{ active: activeTab === 'my' }" @click="switchTab('my')">{{ useT('我的理财') }}</view>
        </view>
      </template>

      <!-- 页面内容 -->
      <view class="content">
        <!-- 理财产品列表 -->
        <view class="product-list" v-if="activeTab === 'market'">
          <view class="product-card" v-for="(product, index) in productList" :key="index" @click="viewProduct(product)">
            <view class="card-header">
              <view class="product-type">{{ product.type }}</view>
            </view>

            <view class="card-content">
              <view class="product-info">
                <view class="product-icon">
                  <image src="/static/home/uCard.png" class="icon" mode="aspectFill"></image>
                </view>
                <view class="product-details">
                  <view class="product-name">{{ product.name }}</view>
                  <view class="product-currency">{{ product.currency }}</view>
                </view>
              </view>

              <view class="product-rates">
                <view class="rate-item">
                  <view class="rate-value">{{ product.annualRate }}%</view>
                  <view class="rate-label">{{ useT('参考年化') }}</view>
                </view>
                <view class="rate-item">
                  <view class="rate-value">{{ product.dailyRate }}%</view>
                  <view class="rate-label">{{ useT('参考日化') }}</view>
                </view>
              </view>
            </view>

            <view class="progress-section">
              <view class="progress-bar">
                <view class="progress-fill" :style="{ width: product.progress + '%' }"></view>
              </view>
              <view class="progress-info">
                <view class="amount">{{ product.currentAmount }}/{{ product.totalAmount }}</view>
                <view class="percentage">{{ product.progress }}%</view>
              </view>
            </view>

            <view class="card-footer">
              <u-button type="primary" size="normal" class="apply-btn" @click.stop="applyProduct(product)">{{ useT('立即申请') }}</u-button>
            </view>
          </view>
        </view>

        <!-- 我的理财 -->
        <view class="my-finance" v-if="activeTab === 'my'">
          <view class="empty-state">
            <image src="/static/images/empty-finance.png" class="empty-image" mode="aspectFit"></image>
            <view class="empty-text">{{ useT('暂无理财记录') }}</view>
            <view class="empty-desc">{{ useT('快去理财市场选择适合的产品吧') }}</view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script setup>
import { useT } from '@/utils/i18n.js';
import { onMounted, ref } from 'vue';

// 响应式数据
const activeTab = ref('market');
const productList = ref([]);
const paging = ref(null);

// 轮播图数据
const bannerList = ref(['/static/mine/banner1.png', '/static/mine/banner1.png']);

// 模拟数据生成函数
const generateMockData = (pageNum, pageSize) => {
  const productTypes = [
    { name: 'USDT-7期', currency: 'USDT', annualRate: '8.00', dailyRate: '0.02', type: '定期' },
    { name: 'USDT-14期', currency: 'USDT', annualRate: '8.50', dailyRate: '0.023', type: '定期' },
    { name: 'USDT-30期', currency: 'USDT', annualRate: '9.00', dailyRate: '0.025', type: '定期' },
    { name: 'BTC-7期', currency: 'BTC', annualRate: '7.50', dailyRate: '0.021', type: '定期' },
    { name: 'ETH-14期', currency: 'ETH', annualRate: '8.20', dailyRate: '0.022', type: '定期' },
    { name: 'USDT-活期', currency: 'USDT', annualRate: '6.00', dailyRate: '0.016', type: '活期' },
    { name: 'BTC-活期', currency: 'BTC', annualRate: '5.50', dailyRate: '0.015', type: '活期' },
    { name: 'ETH-活期', currency: 'ETH', annualRate: '6.50', dailyRate: '0.018', type: '活期' }
  ];

  const data = [];
  const startIndex = (pageNum - 1) * pageSize;

  for (let i = 0; i < pageSize; i++) {
    const productType = productTypes[(startIndex + i) % productTypes.length];
    const totalAmount = Math.floor(Math.random() * 5000000) + 1000000; // 100万到600万
    const currentAmount = Math.floor(totalAmount * (Math.random() * 0.4 + 0.3)); // 30%-70%的进度
    const progress = Math.floor((currentAmount / totalAmount) * 100);

    data.push({
      id: startIndex + i + 1,
      name: productType.name,
      currency: productType.currency,
      annualRate: productType.annualRate,
      dailyRate: productType.dailyRate,
      type: productType.type,
      currentAmount: currentAmount.toLocaleString(),
      totalAmount: totalAmount.toLocaleString(),
      progress
    });
  }

  return data;
};

// z-paging 查询方法
const queryList = (pageNum, pageSize) => {
  console.log(`加载第${pageNum}页，每页${pageSize}条数据`);

  // 模拟网络请求延迟
  setTimeout(() => {
    const data = generateMockData(pageNum, pageSize);

    // 模拟数据加载完成
    paging.value.complete(data);

    // 模拟没有更多数据的情况（第10页后）
    if (pageNum >= 10) {
      paging.value.complete([]);
    }
  }, 800);
};

// 方法
const switchTab = (tab) => {
  activeTab.value = tab;
  // 切换标签时重新加载数据
  if (tab === 'market') {
    paging.value.reload();
  }
};

const applyProduct = () => {
  uni.showToast({
    title: '申请成功',
    icon: 'success'
  });
};

const viewProduct = (product) => {
  console.log('查看产品:', product);
  uni.showToast({
    title: `查看产品: ${product.name}`,
    icon: 'none'
  });
  // 这里可以跳转到产品详情页
};

// 轮播图点击事件
const onBannerClick = (index) => {
  console.log('点击轮播图:', index);
  const banner = bannerList.value[index];
  if (banner && banner.link) {
    uni.navigateTo({
      url: banner.link
    });
  }
};

// 生命周期
onMounted(() => {
  console.log('理财页面加载完成');
});
</script>

<style lang="scss" scoped>
.finance-page {
  min-height: 100vh;
  background-color: #f8f9fa;
}

.banner-swiper {
  margin: 20rpx 30rpx;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);

  .banner-item {
    position: relative;
    width: 100%;
    height: 200rpx;

    .banner-image {
      width: 100%;
      height: 100%;
      border-radius: 20rpx;
    }

    .banner-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(18, 194, 132, 0.8) 0%, rgba(15, 167, 107, 0.8) 100%);
      border-radius: 20rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .banner-content {
        text-align: center;
        color: #fff;

        .banner-title {
          font-size: 48rpx;
          font-weight: 700;
          margin-bottom: 16rpx;
        }

        .banner-subtitle {
          font-size: 28rpx;
          opacity: 0.9;
          font-weight: 500;
        }
      }
    }
  }
}

.nav-tabs {
  display: flex;
  margin: 0 30rpx 30rpx;
  padding: 0;
  background-color: transparent;

  .tab-item {
    text-align: center;
    padding: 12rpx 40rpx;
    font-size: 30rpx;
    color: #999;
    border-radius: 50rpx;
    transition: all 0.3s ease;
    margin-right: 20rpx;

    &:last-child {
      margin-right: 0;
    }

    &.active {
      background-color: #e2f7f1;
      color: #12c284;
    }
  }
}

.content {
  padding: 0 30rpx;
}

.product-list {
  .product-card {
    background-color: #fff;
    border-radius: 16rpx;
    margin-bottom: 24rpx;
    padding: 30rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);

    .card-header {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 24rpx;

      .product-type {
        background-color: #f8f8f8;
        color: #666;
        font-size: 24rpx;
        padding: 6rpx 12rpx;
        border-radius: 8rpx;
        font-weight: 500;
      }
    }

    .card-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30rpx;

      .product-info {
        display: flex;
        align-items: center;

        .product-icon {
          width: 60rpx;
          height: 60rpx;
          margin-right: 20rpx;

          .icon {
            width: 100%;
            height: 100%;
          }
        }

        .product-details {
          .product-name {
            font-size: 32rpx;
            font-weight: 600;
            color: #333;
            margin-bottom: 8rpx;
          }

          .product-currency {
            font-size: 24rpx;
            color: #999;
          }
        }
      }

      .product-rates {
        display: flex;
        background-color: #f8f8f8;
        border-radius: 12rpx;
        padding: 20rpx 24rpx;
        gap: 40rpx;

        .rate-item {
          text-align: center;

          .rate-value {
            font-size: 32rpx;
            font-weight: 600;
            color: #333;
            margin-bottom: 6rpx;
          }

          .rate-label {
            font-size: 22rpx;
            color: #666;
          }
        }
      }
    }

    .progress-section {
      margin-bottom: 30rpx;

      .progress-bar {
        width: 100%;
        height: 10rpx;
        background-color: #f0f0f0;
        border-radius: 10rpx;
        overflow: hidden;
        margin-bottom: 12rpx;

        .progress-fill {
          height: 100%;
          background-color: #12c284;
          border-radius: 3rpx;
          transition: width 0.3s ease;
        }
      }

      .progress-info {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .amount {
          font-size: 26rpx;
          color: #333;
        }

        .percentage {
          font-size: 28rpx;
          font-weight: 600;
          color: #333;
        }
      }
    }

    .card-footer {
      .apply-btn {
        width: 100%;
        height: 80rpx;
        background-color: #12c284;
        border-radius: 40rpx;
        font-size: 30rpx;
        font-weight: 500;
        border: none;
      }
    }
  }
}

.my-finance {
  padding: 100rpx 30rpx;

  .empty-state {
    text-align: center;

    .empty-image {
      width: 200rpx;
      height: 200rpx;
      margin-bottom: 40rpx;
    }

    .empty-text {
      font-size: 32rpx;
      color: #666;
      margin-bottom: 16rpx;
    }

    .empty-desc {
      font-size: 28rpx;
      color: #999;
    }
  }
}
</style>
